<template>
  <div class="bg">
    <nav-com
      :title="$t('choosecar')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1  main-page-wrapper" :style="dataList.length>3?'margin-bottom: 10vh':''">
      <load-more  :onLoadMore="onLoadMore" :enableLoadMore="enableLoadMore">
        <van-radio-group v-model="radio">
          <van-cell-group inset class="m-b-10" v-for="(item,index) in  dataList" :key="index" :class="index=='0'?'m-t-10':''">
            <van-cell clickable  @click="radio = item.id">
              <van-row class="item-content" @click.stop="jumpTo('/deviceManagement_new',item.id)">
                <van-col span="8" class="contentsimg"><img :src="item.image?item.image:require('../../assets/helpRobot/1@2x.png')" alt="" class="icons"></van-col>
                <van-col span="15" class="teshu">
                  <div class="item-content-all">
                    <div class="item-content-all-title">{{ item.bname }}</div>
                    <div class="item-content-all-subtitle">{{ $t('xinghao') }}：{{ item.model }}</div>
                    <div class="item-content-all-subtitle">{{ $t('chejiahao') }}：{{ item.chassis }}</div>
                  </div>
                </van-col>
              </van-row>
              <template #right-icon>
                <van-radio  label-disabled :name="item.id" checked-color="#00DEA1"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <van-cell-group inset class="m-b-10 m-t-10">
        <van-cell clickable>
          <van-row class="item-content"  justify="center" align="center" @click="addcars()">
            <van-col span="24" style="display: flex;justify-content: center"><img src="../../assets/helpRobot/saoyisao@2x.png" alt="" class="icons_add"></van-col>
            <van-col span="24" style="display: flex;justify-content: center">
              <div class="item-content-all">
                <div class="item-content-all-title">{{ $t('addcar') }}</div>
              </div>
            </van-col>
          </van-row>
        </van-cell>
      </van-cell-group>
      </load-more>
    </div>
    <div class='fatSubmit' v-if="dataList.length>0">
      <van-button round type="info" class="fatSubmit_yanse" block @click="subbick()">{{ $t('surechoose') }}</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import loadMore from '@/components/loadmore.vue'
import {bindingdefault, equipmentBlist} from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom,
    loadMore
  },
  data () {
    return {
      radio: '',
      showView: true,
      title: '选择车辆',
      showPage: true,
      lichengValue: '',
      dataList: [],
      page: 1,
      enableLoadMore: true,
      type: ''
    }
  },
  mounted () {
    this.type = this.$route.query.canshu || ''
    this.init()
  },
  methods: {
    subbick () {
      var that = this
      console.log('====radio', that.radio)
      if (!that.radio) {
        if (that.$i18n.locale == 'zh') {
          that.$toast('请选择车辆')
        } else {
          that.$toast('Please select a vehicle')
        }
      } else {
        bindingdefault({ eid: that.radio }).then((res) => {
          if (res.code == 1) {
            that.$toast(res.msg)
            const nav = navigator.userAgent;
            if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
              phone.chooseCars (that.radio);
              setTimeout(() => {
                that.backHandler()
              }, 1000)
            } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
              that.$bridge.callhandler('chooseCars', {id:that.radio}, res => {
                setTimeout(() => {
                  that.backHandler()
                }, 1000)
              });
            }
          }else{
            that.$toast(res.msg)
          }
        })
      }
    },
    jumpTo (url, canshu) {
      this.$router.push({ path: url,
        query: { canshu: canshu }
      })
      localStorage.setItem('parentRouter','/chooseManagement')
    },
    addcars () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.addCarsclick()
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('addCarsclick', {}, res => {})
      }
    },
    // 返回
    backHandler () {
      if (this.type) {
        this.$router.go(-1)
      } else {
        const nav = navigator.userAgent
        if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
          phone.onBackPress()
        } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          this.$bridge.callhandler('onBackPress', {}, res => {})
        } else {
          this.$router.go(-1)
        }
      }
    },
    // 初始化
    init () {
      this.getmanagementList()
      // this.getuserinfo()
    },
    onLoadMore (done) {
      setTimeout(() => {
        if (!this.enableLoadMore) {
          return
        }
        this.page = this.page + 1
        this.getmanagementList()
        done()
      }, 200)
    },
    getmanagementList () {
      equipmentBlist({ page: this.page }).then((res) => {
        if (res.code == 1) {
          if (res.data.list.length < 10) {
            this.enableLoadMore = false
          }
          this.dataList = this.dataList.concat(res.data.list)
          this.radio = res.data.deviceid
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.top-view1{
  margin-top: 26.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.item-content{
  width: 95%;
  .contentsimg{
    width: 84px;
    height: 84px;
    .icons{
      width: 100%;
      height: 100%;
    }
  }
  .icons_add{
    width: 50px;
  }
  .teshu{
    height: 88px;
    margin-left: 5px;
    .item-content-all{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      height: 100%;
      .item-content-all-title{
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-family:PingFang, PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .item-content-all-subtitle{
        width: 100%;
        text-align: left;
        font-size: 16px;
        font-family:PingFang, PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
  }
}
.van-radio {
  align-items: flex-start;
}
.item-content-all-title{
  width: 100%;
  font-size: 20px;
  font-family:PingFang, PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
}
.fatSubmit{
  position: fixed;
  bottom: 20px;
  width: 92%;
  padding: 0.3rem 0.42667rem 10px;
  .fatSubmit_yanse{
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
  }

}
</style>
